import React, { Component } from 'react'
import { Icon, SwipeAction, List } from 'antd-mobile'

export default class Commodity extends Component {
  render() {
    return (
      <div className={`rt-commodity-container`}>
        <header>
          <Icon type="question" />
          <span>外汇商品</span>
          <Icon type="question" />
        </header>
        <section className={`-text-box`}>
          <div className={`-name`}>外汇名称</div>
          <div className={`-sell`}>卖</div>
          <div className={`-buy`}>买</div>
        </section>
        <div className={`-scrollable-container`}>
          <SwipeAction
            autoClose
            right={[
              {
                text: <Icon type="delete" />,
                onPress: () => console.log('todo'),
                style: { backgroundColor: '#F4333C', color: 'white' },
              },
            ]}
          >
            <div className={`-goods`}>
              <div className={`-left`}>
                <span>EUR/USD</span>
                <span className={`-dot`}></span>
              </div>
              <div className={`-middle`}>
                <span>1.10170</span>
              </div>
              <div className={`-right`}>
                <span>1.10175</span>
              </div>
            </div>
          </SwipeAction>

          <div className={`-goods`}>
            <div className={`-left`}>
              <span>EUR/CNH</span>
            </div>
            <div className={`-middle`}>
              <span>1.10170</span>
            </div>
            <div className={`-right`}>
              <span>1.10175</span>
            </div>
          </div>

          <div className={`-goods -red`}>
            <div className={`-left`}>
              <span>USD/JPY</span>
            </div>
            <div className={`-middle`}>
              <span>1.10170</span>
            </div>
            <div className={`-right`}>
              <span>1.10175</span>
            </div>
          </div>

          <div className={`-goods -grey`}>
            <div className={`-left`}>
              <span>USD/JPY</span>
            </div>
            <div className={`-middle`}>
              <span>1.10170</span>
            </div>
            <div className={`-right`}>
              <span>1.10175</span>
            </div>
          </div>
        </div>
      </div>
    )
  }
}